<script setup lang="ts">
import List from '../../user/components/list.layout.vue'

const emit = defineEmits(['lsClose'])
const state: any = reactive({
  show: false,
  tags: [],
  keyword: ''
})
const info = ref<any>({})
const open = (e: any) => {
  if (e.type === 'tag') {
    state.tags = [e.name]
    state.keyword = null
  } else {
    state.keyword = e.name
    state.tags = null
  }
  info.value = e
  state.show = true
}
const closeChange = () => {
  emit('lsClose')
  state.show = false
}
const show = () => {
  state.show = true
}
defineExpose({
  open,
  show
})

function IsPhone() {
  var info = navigator.userAgent
  return /mobile/i.test(info)
}
const isMoile = ref(IsPhone())
</script>

<template>
  <n-drawer
    v-model:show="state.show"
    resizable
    :default-height="isMoile ? 500 : 532"
    placement="bottom"
    to="#tag-page"
  >
    <n-drawer-content
      :body-content-style="{ padding: '20px 0 0 0' }"
      closable
      :title="info.name"
    >
      <list :tags="state.tags" :keyword="state.keyword" @close="closeChange" />
    </n-drawer-content>
  </n-drawer>
</template>

<style lang="scss">
.n-drawer {
  position: fixed;
}
</style>
